
<!doctype html>
<html>
	<meta charset="utf-8">
	<title>Creating dialogs on demand</title>

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
	<style type="text/css">
	#tire-specs {
		border-collapse: collapse;
	}
	#tire-specs th,
	#tire-specs td {
		padding: 2px 5px;
		border: 1px solid #000;
	}
	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -8px;
		margin-left: -8px;
	}
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

		$('#tire-specs th a').each(function() {
			var $dialog = $('<div></div>')
				.append($loading.clone());
			var $link = $(this).one('click', function() {
				$dialog
					.load($link.attr('href') + ' #content')
					.dialog({
						title: $link.attr('title'),
						width: 500,
						height: 300
					});
					
				$link.click(function() {
					$dialog.dialog('option','position',[event.clientX,event.clientY]);
					$dialog.dialog('open');
					return false;
				});

				return false;
			});
		});
	});
	</script>
</head>
<body>

<p>This is an example from the Nemikor Blog article <a href="http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/">Creating dialogs on demand</a>.</p>

<h2>Michelin Primacy MXV4</h2>

<table id="tire-specs">
	<thead>
		<tr>
			<th>Size</th>
			<th><a href="utqg.html" title="Uniform Tire Quality Grade">Uniform Tire Quality Grade</a></th>
			<th><a href="max-load.html" title="Maximum Load">Max Load</a></th>
			<th><a href="max-inflation.html" title="Maximum Inflation Pressure">Max Inflation Pressure</a></th>
			<th><a href="tread-depth.html" title="Tread Depth">Tread Depth</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>205/65R15</td>
			<td>620 A A</td>
			<td>1477 lbs.</td>
			<td>44 psi</td>
			<td>11/32"</td>
		</tr>
	</tbody>
</table>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9863993-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

